<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
      //首先把  数组定义出来
      var stu = [
    {student_id:1,student_name:"张三",student_age:18,student_hobbu:["唱歌","打篮球","画画"]},
    {student_id:2,student_name:"李四",student_age:19,student_hobbu:["游泳","羽毛球","写字"]},
    {student_id:3,student_name:"王五",student_age:20,student_hobbu:["唱歌","读书","乒乓球"]}
    ];
      //把表格所需要的信息整理出来
      var arr1 =["学号","姓名","年龄","爱好","操作"];
      //接下来整题目上的表格
      //先把表格 的属性定义出来
      var tbheigth =350;
      var tbweigth = 650;
//开始写表格了
      document.write("<table border='1' heigth= '" +tbheigth+"'width='"+tbweigth+"'cellspacing=0 cellpadding=0>");
       //这个是要放表格的第一行的信息
        for(var i = 0; i<arr1.length;i++){
            document.write("<th>");
            document.write(arr1[i]);
            document.write("</th>");

        } //第一行已经打印好了
        //接下来用一个二重循环来写出来剩下的几行
        //遍历对象属性  
     /*    使用 for   in 语句
					 for （var  key   in   objName）{
   	        // key 变量，在循环中代表一个属性键        
           // 通过 objName[ key ] 访问到相应的属性值
    } */

    //这是外循环
        for(var j=0;j<stu.length;j++){
            document.write("<tr>");
            for (var  key   in   stu[j]){
   	        // key 变量，在循环中代表一个属性键        
           // 通过 objName[ key ] 访问到相应的属性值
           document.write("<td  align=center>");
           document.write(stu[j][key]);
           document.write("</td>");
    }
    //在一重循环里加删除
    document.write("<td align = center>");
    document.write("<a href='#'>删除</a>");
    document.write("</td>");

    document.write("</tr>");


        }
        document.write("</table>");


    </script>
</html>